<template>
    <el-dialog custom-class="form-dialog permission-dialog" title="编辑权限" :visible.sync="dialogVisible" :destroy-on-close="true"
    :close-on-click-modal="false" width="800px" v-loading="loading">
        <!-- 表单内容 -->
        <div class="form-dialog-content-box">
            <el-tree ref="tree" :data="menuList" :props="props" node-key="id" show-checkbox :default-checked-keys="checkedKeys" :check-strictly="true"
            @check="handleCheckChange"></el-tree>
        </div>
        <!-- 提交区域 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancelBtn" :size="size">取 消</el-button>
            <el-button type="primary" @click="handleSubmitBtn" :size="size">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
//引入混入逻辑
import mixin from '@/mixins/form'
export default {
    name: "permissionDialog",
    mixins: [mixin],
    props: {
        //父节点列表
        parentPermissions: {
            type: Array,
            default: function(){
                return []
            }
        }
    },
    data() {
        return {
            size: "",
            props: {
                label: 'title',
                children: 'children'
            },
            loading: false,//页面加载状态
            dialogVisible: false,//对话框展示状态

            roleId: "",//角色id
            checkedKeys: [],//拥有的权限列表
        }
    },
    methods: {
        //初始化数据(供外部调用)
        initData(row = {}) {
            //记录当前id
            this.roleId = row.id
            //拿到后，已经勾选的节点，要展开
            this.checkedKeys = []
        },
        //初始化已经选中的权限(供外部调用)
        setCheckedData(permissionIds = []){
            this.checkedKeys = permissionIds
        },
        //权限选择事件
        handleCheckChange(data, {checkedKeys}) {
            //是否选中
            const checked = checkedKeys.includes(data.id)
            // //是否选中
            if(checked){
                //选中,有子节点的话，全部勾选,有父节点，则自动勾选
                this.autoCheckChildren(data, true)
                this.autoCheckParents(data, true)
            }else{
                //取消选中,有子节点的话，全部取消勾选
                this.autoCheckChildren(data, false)
            }
        },
        //处理确认按钮的事件
        handleSubmitBtn() {
            //事件抛出
            this.$emit('submit',{
                roleId: this.roleId,
                permissionIds: this.$refs.tree.getCheckedKeys()
            })
        },
        //自动勾选子节点（递归）
        autoCheckChildren(node, checked = true){
            if(node.children && node.children.length > 0){
                //遍历子节点
                node.children.forEach(c_item=>{
                    //选中该节点
                    this.$refs.tree.setChecked(c_item.id, checked)
                    //递归调用
                    this.autoCheckChildren(c_item, checked)
                })
            }
        },
        //自动勾选父节点（递归）
        autoCheckParents(node, checked = true){
            //查找是否存存在父节点
            const parent = this.menuOrigin.find(item=>{
                return item.id == node.pid
            })
            //存在则选中
            if(parent){
                //选中该节点
                this.$refs.tree.setChecked(parent.id, checked)
                //递归调用
                this.autoCheckParents(parent)
            }
        },
    },
    computed: {
        ...mapState(['menuOrigin']),
        //菜单，数组格式
        menuList(){
            //转换成树形对象
            const menuTreeShow = this.$utils.buildTree(this.$utils.deepCopy(this.parentPermissions))
            //将树形对象最外层转换成数组
            const menuTreeArr = []
            for(var key in menuTreeShow){
                menuTreeArr.push(menuTreeShow[key])
            }
             //深度排序
            this.$utils.deepSort(menuTreeArr)
            return menuTreeArr
        }
    }
}
</script>

